<template>
  <div>
    <el-form :rules="rules" class="login-container" label-position="left" label-width="0px"
             v-loading="loading" :model="ruleForm" ref="ruleForm">
      <h3 class="login_title">宠物商城-后台管理</h3>

      <el-form-item prop="name">
        <el-input type="text" v-model="ruleForm.name" auto-complete="off" placeholder="管理员账号"></el-input>
      </el-form-item>

      <el-form-item prop="password">
        <el-input type="password" v-model="ruleForm.password" auto-complete="off" placeholder="管理员密码" show-password></el-input>
      </el-form-item>

      <el-checkbox class="login_remember" v-model="checked" label-position="left">记住密码</el-checkbox>

      <el-form-item style="width:100%">
        <el-button type="primary" style="width:100%" @click="loginBtn('ruleForm')">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import cookie from 'js-cookie'

  const axios = require('axios')
  export default {
    data() {
      return {
        rules: {
          name: [{required: true, message: '账号不能为空', trigger: 'blur'}],
          password: [{required: true, message: '密码不能为空', trigger: 'blur'}]
        },
        checked: true,
        ruleForm: {
          name: '',
          password: ''
        },
        loading: false
      }
    },
    methods: {
      loginBtn(formName) {
        const _this = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            axios.post('http://localhost:9000/admin/login', this.ruleForm).then(function (resp) {
              console.log(resp)
              if (resp.data == 'success') {
                cookie.set('loginName_pet', _this.ruleForm.name)
                _this.$message({
                  type: 'success',
                  message: '欢迎使用'
                })
                _this.$router.push('/user')
              } else {
                _this.$message({
                  type: 'error',
                  message: '账号或密码错误'
                })
              }
            })
          } else {
            return false;
          }
        });
      }
    }
  }
</script>

<style>
  html {
    background: #F8F8FF;
  }

  .login-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 35px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }

  .login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }

  .login_remember {
    margin: 0px 0px 35px 0px;
    text-align: left;
  }
</style>
